<template>
<div>

<el-row>
{{id}}
	<el-form :inline="true" :model="form" size="small">
	<el-form-item >
		<daterange v-bind:se.sync="s_e" type="daterange"></daterange>
    </el-form-item>

    <el-form-item v-if="gridid == ''">
	    <el-cascader 
			style="width:350px;"
			filterable
			:options="treedata"
			:props="props1"
			filterable
			change-on-select
			v-model="selectedOptions">
			</el-cascader>
	</el-form-item>

	<el-form-item >
	    <el-input v-model="form.question_title" placeholder="任务名称"></el-input>
	</el-form-item>

	<el-form-item >
	    <el-select v-model="form.status"  placeholder="处理状态" style="width:100px;">
	      <el-option 
	      v-for="item in status_select_label"
	      :label="item.label" :value="item.value"></el-option>
	    </el-select>
	</el-form-item>

	<el-form-item>
	    <el-button type="primary" @click="init">查询</el-button>
	</el-form-item>
</el-form>
</el-row>


<el-row>
<el-table
    :data="list.results"
    border
    style="width: 100%">
    <el-table-column
      prop="question_title"
      label="问题名称"
      width="250">
    </el-table-column>
    <!-- <el-table-column
      prop="mobile"
      width="100"
      label="电话">
    </el-table-column> -->
    <el-table-column
      prop="grid_names"
      label="所属网格"
      width="200">
    </el-table-column>
    <el-table-column
      label="处理状态"
      width="100">
      <template slot-scope="scope">
      	{{status_label[parseInt(scope.row.status)]}}
      </template>
    </el-table-column>
    <el-table-column
      width="50"
      fixed="right"
      label="操作">
      	<template slot-scope="scope">
<!--      		<el-button type="success" size="mini" -->
<!--      		icon="el-icon-view" circle-->
<!--      		@click="playback(scope.row)">-->
<!--      		</el-button>-->
      		<el-button type="danger" size="mini" 
      		icon="el-icon-view" circle
      		@click="info(scope.row)">
      		</el-button>
      	</template>
    </el-table-column>
  </el-table>
</el-row>

<el-row class="text-right mt20 mb20">
<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="pageNo"
  :page-size="pageSize"
  layout="total, prev, pager, next"
  :total="list.totalRecord">
</el-pagination>
</el-row>


<el-dialog
  :title="currentEvent.info.question_title"
  :visible.sync="eventDialogVisible"
  append-to-body
  width="80%">

  	<!-- <el-card class="box-card"> -->
  		<eventinfo :obj="currentEvent"></eventinfo>
  	<!-- </el-card> -->
  	<!-- 
	<el-tabs v-model="activeName2" type="card" >
	    <el-tab-pane label="事件详情" name="first">
	    	<eventinfo :obj="currentEvent"></eventinfo>
	    </el-tab-pane>
	    <el-tab-pane label="事件流程" name="second" v-if="currentEvent.flow">
	    	<flowinfo :obj="currentEvent" ></flowinfo>
	    </el-tab-pane>
	</el-tabs> -->
  
</el-dialog>

</div>
</template>

<script>

import daterange from '@/components/daterange'

import eventinfo from '@/views/event/info'
import flowinfo from '@/views/event/flow'

export default {
	
	name : 'question',
	
	data () {
		return {
		  	s_e : [this.$util.date2str(new Date()), this.$util.date2str(new Date())],

		  	//treedata : [],

		  	form : {},

		  	props1 : {
				value : 'id',
				label : 'name',
			},

			selectedOptions : ['1'],

			list : {},

			pageNo : 1,
		  	pageSize : 5,

		  	status_label : ['', '处理中', '已完成'],

		  	status_select_label : [
				{label : '全部', value : undefined},
				{label : '处理中', value : '1'},
				{label : '已完成', value : '2'},
			],


			eventDialogVisible : false,

		    currentEvent : {
		    	info : {
		    		title : '',
		    	}
		    },

		    activeName2 : 'first',
		}
	},

	props : {
		treedata: {
			type: Array,
			default () {
				return []
			},
		},

		gridid : {
			type : String,
			default : '',
		}
	},

	components : {
		daterange,
		eventinfo,
		flowinfo,
	},

	computed : {

		id () {
			this.init();
			return "";
		}
	},

	methods : {
		init () {
			let para = {
				fun : 'eventList',
				requestType : 'get',
				//grid_id : this.selectedOptions[this.selectedOptions.length - 1],
				start_time : this.s_e[0] + ' 00:00:00',
				end_time : this.s_e[1] + ' 23:59:59',
				...this.form,
				pageNo : this.pageNo,
				pageSize : this.pageSize,
				cb : res => {
					console.log('eventList');
					console.log(res);
					this.list = res;
				}
			};

			if(this.gridid == ''){
				para['grid_id'] = this.selectedOptions[this.selectedOptions.length - 1];
			}else{
				para['grid_id'] = this.gridid;
			}
			this.$http(para);
		},

		handleSizeChange (val) {
			this.pageSize = val;
			this.init();
		},

		handleCurrentChange (val) {
			this.pageNo = val;
			this.init();
		},

		playback (item) {
			this.$emit('getpoint', {
				...item,
				what : 'question',
				lon : item.event_longitude, 
				lat : item.event_latitude,
			});
			
		},

		info (item) {
			console.log('info');

			console.log(item);
			this.$http({
				fun : 'eventInfo',
				id : item.id,
				cb : res => {

					this.$http({
						fun : 'flowList',
						id : item.id,
						cb : res1 => {
							console.log('ffffffff');
							console.log(res);
							console.log(res1);

							res1.forEach(item => {
								if(item.params == undefined || item.params == ''){
									item['paramsobj'] = {
										content : '',
									};
								}else{
									item['paramsobj'] = JSON.parse(item.params);
								}
							})

							this.currentEvent = {
								info : {
									...res,
									imgs : res.question_img ? res.question_img.split(',') : [],
									videos : res.question_video ? res.question_video.split(',') : [],
								},
								flow : res1,
								
							};
							console.log(this.currentEvent);
							this.activeName2 = 'first';
							this.eventDialogVisible = true;
						}
					});
				}
			});

			
		},
	},

	watch : {
	    
	},

	mounted () {
		this.init();
	},

}
</script>

<style scoped>

</style>
